<template>
  <div ref="charts">
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: '',
      inMember: 0,
      outMember: 0
    }
  },
  mounted() {

    this.$api.getMemberNum().then(res => {
      this.inMember = res.zx + res.sx
      this.outMember = res.lz
      if (this.outMember === 0) {
        this.total = '100%'
      } else {
        this.total = parseInt(this.inMember / (this.outMember + this.inMember) * 100) + '%'
      }
      this.init()

    })
  },
  methods: {
    init() {
      var data = {
        title: '在职/离职员工比例',
        percentage: this.total,
        data: [
          { value: this.inMember, name: '在职员工' },
          { value: this.outMember, name: '离职员工' }
        ],
      }
      var option = {
        title: [{
          text: '在职/离职员工比例',
          left: 'center'
        }, {
          // 第一个圆环标题
          text: data.percentage, // 主标题
          textStyle: {
            // 主标题样式
            color: "#0f0f0f",
            lineHeight: 25,
            fontSize: 20,
            fontWeight: "400",
          },
          left: "49%", // 定位到适合的位置
          top: "37%", // 定位到适合的位置
          subtext: "比例", // 副标题
          subtextStyle: {
            // 副标题样式
            color: "#c1c1c0",
            fontSize: 14,
          },
          textAlign: "center", // 主、副标题水平居中显示
        },],
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",

        }, //提示框，鼠标悬浮交互时的信息提示
        legend: {
          left: "center",
          bottom: "5%",
          itemGap: 8,
          itemWidth: 12,
          itemHeight: 12,
        },
        series: [{
          name: data.title, //tooltip提示框中显示内容
          type: "pie", //图形类型，如饼状图，柱状图等
          radius: ["45%", "58%"], //第一项是内半径，第二项是外半径。
          center: ["50%", "50%"],
          color: ["#00ffff", "#dcdcdc"],
          label: {

            position: "center",
            normal: {

              show: false,
            },
          },
          data: [
            { value: data.data[0].value, name: data.data[0].name },
            { value: data.data[1].value, name: data.data[1].name },
          ], //数据，数据中其他属性，查阅文档
        },
        {
          type: "pie",
          radius: ["0%", "35%"], //第一项是内半径，第二项是外半径。
          center: ["50%", "50%"],
          hoverAnimation: false,
          color: "#fff",
          data: [{
            value: 0,
            itemStyle: {
              normal: {
                shadowColor: "#e3e3e3",
                shadowBlur: 20,
              },
            },
          },],
        },
        ],
      };
      const mychart = this.$echarts.init(this.$refs.charts)
      mychart.setOption(option)
    }

  }
}
</script>

<style>
</style>